<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="font-size: 20px; color: white; width: 100%; text-align: left">
      资源列表
    </div>
    <div
      style="
        width: 100%;
        flex: 1;
        margin-top: 10px;
        border-radius: 10px;
        background: #1c1c1c;
        border: solid 2px #404040;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          width: 95%;
          height: 30px;
          margin: 20px 0;
          justify-content: space-between;
        "
      >
        <div style="display: flex; align-items: center">
          <div
            style="
              width: 5px;
              height: 30px;
              background: #27c48f;
              border-radius: 5px;
              margin-right: 10px;
            "
          ></div>
          <div style="color: #d3d3d3">全部资源</div>
        </div>
        <div style="display: flex; align-items: center">
          <div
            style="display: flex; align-items: center; cursor: pointer"
            @click="goToScanResourcePage"
          >
            <img
              src="../assets/扫描设备.png"
              style="width: 15px; height: 15px; margin-right: 10px"
              alt=""
            />
            <div style="color: #d3d3d3">扫描资源</div>
          </div>
          <div
            @click="deleteAllResources"
            style="
              display: flex;
              align-items: center;
              margin: 0 20px;
              cursor: pointer;
            "
          >
            <img
              src="../assets/deleteLighter.png"
              style="width: 15px; height: 15px; margin-right: 10px"
              alt=""
            />
            <div style="color: #d3d3d3">全部删除</div>
          </div>
        </div>
      </div>
      <div
        style="
          width: 95%;
          flex: 1;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="file" label="文件名" width="120">
          </el-table-column>
          <el-table-column
            prop="submitTime"
            label="添加时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="duration"
            label="节目时长"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center">
                <img
                  @click="editResource(scope.row)"
                  src="../assets/editResource.png"
                  style="
                    width: 15px;
                    height: 15px;
                    margin-right: 10px;
                    cursor: pointer;
                  "
                  alt=""
                />

                <img
                  @click="deleteResource(scope.row)"
                  src="../assets/deleteResource.png"
                  style="width: 15px; height: 15px; cursor: pointer"
                  alt=""
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },
  methods: {
    async deleteAllResources() {
      let res = await request({
        url: "/material/api/deleteAllResources",
        method: "DELETE",
      });
    },
    goToScanResourcePage() {
      this.$router.push("/scanResource");
    },
    editResource(item) {
      console.log(item);
    },
    playResource(item) {
      console.log(item.$index);
    },
    async deleteResource(item) {
      let res = await request({
        url: "/material/api/deleteResource",
        method: "POST",
        data: {
          command: 20,
          user_name: localStorage.getItem("user_name"),
          data: [
            {
              file_path: item.file,
            },
          ],
        },
      });
      if (res.data.status == 200) {
        this.getResourceList();
      }
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex);
      if (rowIndex % 2 == 0) {
        console.log(0);
        return "row1";
      } else {
        console.log(1);
        return "row2";
      }
    },
    async getResourceList() {
      let res = await request({
        url:
          "/material/api/getResourceList/" +
          localStorage.getItem("user_name") +
          "/null",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.tableData = res.data.data.data;
      }
    },
  },
  mounted() {
    this.getResourceList();
  },
};
</script>

<style scoped>
/deep/ .el-table th {
  background-color: #4e605a !important;
  color: #eeeeee !important;
}
/deep/ .el-table .row1 {
  background: #1f2a26 !important;
  color: #d2e2dd !important;
}

/deep/ .el-table .row2 {
  background: #1c1d1d !important;
  color: #d2e2dd !important;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: initial !important;
}
/deep/ .el-table {
  background-color: transparent !important;
}

/* 修改表格主体区域的背景色 */
/deep/ .el-table__body {
  background-color: transparent !important;
}
</style>